<template>
    <section class="common-links">
        <!-- <div class="section-title">常用</div>
        <div class="links-grid">
            <a href="#">购物</a>
            <a href="#">军事</a>
            <a href="#">生活</a>
            <a href="#">新闻</a>
            <a href="#">购物</a>
            <a href="#">军事</a>
            <a href="#">生活</a>
            <a href="#">新闻</a>
            <a href="#">购物</a>
            <a href="#">军事</a>
        </div> -->
        <lls-tabs v-model="activeName" @tab-click="handleClick">
            <template v-slot:button>
                <lls-button type="primary" icon="lls-icon-plus" size="small"
                    >添加</lls-button
                >
            </template>
            <lls-tab-pane
                v-for="tab in tabs"
                :label="tab.label"
                :name="tab.name"
                :key="tab.name"
            >
                <span slot="label">
                    <img :src="tab.icon" class="tabImg" :alt="tab.label" />
                    {{ tab.label }}
                </span>
                <ul>
                    <li v-for="item in tab.items" :key="item.name">
                        <img :src="item.icon" class="tabImg" :alt="item.name" />
                        {{ item.name }}
                    </li>
                </ul>
            </lls-tab-pane>
        </lls-tabs>
    </section>
</template>

<script>
export default {
    name: "PanelContent",
    data() {
        return {
            activeName: "commonlyUsed",
            tabs: [
                {
                    name: "commonlyUsed",
                    label: "常用",
                    icon: require("@/assets/shoucang2.svg"),
                    items: [
                        {
                            name: "购物",
                            icon: require("@/assets/gwc.svg"),
                        },
                        {
                            name: "视频",
                            icon: require("@/assets/luxiangji.svg"),
                        },
                        { name: "直播", icon: require("@/assets/zhibo.svg") },
                        { name: "新闻", icon: require("@/assets/xinwen.svg") },
                        { name: "财经", icon: require("@/assets/caijing.svg") },
                        { name: "社区", icon: require("@/assets/shequ.svg") },
                        { name: "音乐", icon: require("@/assets/yinyue.svg") },
                        { name: "银行", icon: require("@/assets/yinhang.svg") },
                        { name: "体育", icon: require("@/assets/tiyu.svg") },
                        { name: "军事", icon: require("@/assets/junshi.svg") },
                        { name: "汽车", icon: require("@/assets/qiche.svg") },
                        { name: "手机", icon: require("@/assets/shouji.svg") },
                        { name: "数码", icon: require("@/assets/shuma.svg") },
                        { name: "动漫", icon: require("@/assets/dongman.svg") },
                        {
                            name: "房产",
                            icon: require("@/assets/fangchan.svg"),
                        },
                        {
                            name: "邮箱",
                            icon: require("@/assets/youxiang.svg"),
                        },
                        { name: "学习", icon: require("@/assets/xuexi.svg") },
                        { name: "招聘", icon: require("@/assets/zhaopin.svg") },
                        // ... add more items
                    ],
                },
                {
                    name: "life",
                    label: "生活",
                    icon: require("@/assets/kafei.svg"),
                    items: [
                        {
                            name: "购物",
                            icon: require("@/assets/gwc.svg"),
                        },
                        {
                            name: "视频",
                            icon: require("@/assets/luxiangji.svg"),
                        },
                        { name: "银行", icon: require("@/assets/yinhang.svg") },
                        { name: "体育", icon: require("@/assets/tiyu.svg") },
                        { name: "军事", icon: require("@/assets/junshi.svg") },
                        { name: "汽车", icon: require("@/assets/qiche.svg") },
                        { name: "手机", icon: require("@/assets/shouji.svg") },
                        { name: "数码", icon: require("@/assets/shuma.svg") },
                        { name: "动漫", icon: require("@/assets/dongman.svg") },
                        { name: "直播", icon: require("@/assets/zhibo.svg") },
                        { name: "新闻", icon: require("@/assets/xinwen.svg") },
                        { name: "财经", icon: require("@/assets/caijing.svg") },
                        { name: "社区", icon: require("@/assets/shequ.svg") },
                        { name: "音乐", icon: require("@/assets/yinyue.svg") },

                        {
                            name: "房产",
                            icon: require("@/assets/fangchan.svg"),
                        },
                        {
                            name: "邮箱",
                            icon: require("@/assets/youxiang.svg"),
                        },
                        { name: "学习", icon: require("@/assets/xuexi.svg") },
                        { name: "招聘", icon: require("@/assets/zhaopin.svg") },
                    ],
                },
                {
                    name: "tool",
                    label: "工具",
                    icon: require("@/assets/gongju.svg"),
                    items: [
                        {
                            name: "购物",
                            icon: require("@/assets/gwc.svg"),
                        },
                        {
                            name: "视频",
                            icon: require("@/assets/luxiangji.svg"),
                        },
                        { name: "财经", icon: require("@/assets/caijing.svg") },
                        { name: "社区", icon: require("@/assets/shequ.svg") },
                        { name: "体育", icon: require("@/assets/tiyu.svg") },
                        { name: "军事", icon: require("@/assets/junshi.svg") },
                        { name: "汽车", icon: require("@/assets/qiche.svg") },
                        { name: "直播", icon: require("@/assets/zhibo.svg") },
                        { name: "新闻", icon: require("@/assets/xinwen.svg") },

                        { name: "音乐", icon: require("@/assets/yinyue.svg") },
                        { name: "银行", icon: require("@/assets/yinhang.svg") },

                        { name: "手机", icon: require("@/assets/shouji.svg") },
                        { name: "数码", icon: require("@/assets/shuma.svg") },
                        { name: "动漫", icon: require("@/assets/dongman.svg") },
                        {
                            name: "房产",
                            icon: require("@/assets/fangchan.svg"),
                        },
                        {
                            name: "邮箱",
                            icon: require("@/assets/youxiang.svg"),
                        },
                        { name: "学习", icon: require("@/assets/xuexi.svg") },
                        { name: "招聘", icon: require("@/assets/zhaopin.svg") },
                    ],
                },
                // ... add more tabs if needed
            ],
        };
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
    },
};
</script>

<style scoped lang="scss">
.common-links {
    background-color: #fff;
    margin-bottom: var(--card-space);
    padding: 0 5px 5px 0;
    border-radius: 5px;
    ::v-deep .lls-tabs__header {
        padding: 0 10px;
        margin: 0;
    }
    ::v-deep .lls-tabs__active-bar.is-top::after {
        display: none;
    }
    ul {
        margin: 0;
        background: hsla(0, 0%, 96%, 0.4);
        border-radius: 1px;
        flex-wrap: wrap;
        padding: 3px;
        box-sizing: border-box;
        display: flex;
    }
    li {
        list-style-type: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border: 1px solid transparent;
        border-radius: 2px;
        cursor: pointer;
        font-size: 12px;
        height: 28px;
        padding: 0 5px;
        width: 11.11111%;
        transition: border 0.2s ease-in-out;
    }
    li:hover {
        border: 1px solid #ccc;
    }
    .tabImg {
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-right: 5px;
    }

    /* .section-title {
    font-size: 18px;
    margin-bottom: 10px;
}

.links-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.links-grid a {
    text-decoration: none;
    color: var(--primary-color);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    flex: 1 1 16.666%;
    box-shadow: var(--card-shadow); */
}
</style>
